<template>
  <div>
    <el-card shadow="never">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="$t('post.postForSearch')" name="post">
            <div class="clearfix" style="padding-bottom:25px">
              检索到 <code>{{ query.total }}</code>
              条关于 <code class="has-text-info">{{ decodeURIComponent(query.keyword) }}</code> 的记录
            </div>
            <article v-for="(item, index) in list" :key="index" class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img 
                  :src="item.avatar"
                  style="border-radius: 5px"
                  > 
                </figure>
              </div>
              <div class="media-content">
                <div class="">
                  <p class="ellipsis is-ellipsis-1">
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span>
                      </router-link>
                    </el-tooltip>
                  </p>
                </div>
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <span @click="search(tag.name)" style="cursor:pointer;">
                              {{ "#" + tag.name }}
                        </span>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
          </el-tab-pane>

          <el-tab-pane :label="$t('post.user')" name="user">
            <div class="clearfix" style="padding-bottom:25px">
              检索到 <code>{{ query.total }}</code>
              条关于 <code class="has-text-info">{{ decodeURIComponent(query.keyword) }}</code> 的记录
            </div>
            <article v-for="(item, index) in list" :key="index" class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img 
                  :src="item.avatar"
                  style="border-radius: 5px"
                  > 
                </figure>
              </div>
              <div class="media-content">
                <div class="">
                  <p class="ellipsis is-ellipsis-1">
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span>
                      </router-link>
                    </el-tooltip>
                  </p>
                </div>
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <span @click="search(tag.name)" style="cursor:pointer;">
                              {{ "#" + tag.name }}
                        </span>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
          </el-tab-pane>

          <el-tab-pane :label="$t('post.tag')" name="tag">
            <div class="clearfix" style="padding-bottom:25px">
              检索到 <code>{{ query.total }}</code>
              条关于 <code class="has-text-info">{{ decodeURIComponent(query.keyword) }}</code> 的记录
            </div>
            <article v-for="(item, index) in list" :key="index" class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img 
                  :src="item.avatar"
                  style="border-radius: 5px"
                  > 
                </figure>
              </div>
              <div class="media-content">
                <div class="">
                  <p class="ellipsis is-ellipsis-1">
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span>
                      </router-link>
                    </el-tooltip>
                  </p>
                </div>
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <span @click="search(tag.name)" style="cursor:pointer;">
                              {{ "#" + tag.name }}
                        </span>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--分页-->
      <pagination
        v-show="query.total > 0"
        :total="query.total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="fetchList"
      />
    </el-card>
  </div>
</template>

<script>
import { searchByKeyword } from '@/api/search'
import Pagination from '@/component/Pagination'

export default {
  name: 'Search',
  components: { Pagination },
  watch: {
    "$route": {
      handler(route) {
        this.query.keyword = route.query.key;
        this.fetchList();
      }
    }
  },
  data() {
    return {
      activeName: "post",
      list: [],
      query: {
        keyword: this.$route.query.key,
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      searchByKeyword(this.query, this.activeName).then(value => {
        const { data } = value
        this.list = data.records
        this.query.total = data.total
        this.query.pageSize = data.size
        this.query.pageNum = data.current
      })
    },
    handleClick(tab) {
      this.query.pageNum = 1;
      this.fetchList();
      this.activeName = tab.name
    },
    search(tagName) {
      this.$router.push({ path: '/tag?key=' + encodeURIComponent(tagName.replace(/%/g, '%25')) })
    }
  }
}
</script>

<style scoped>

</style>
